<template>
  <div class="videoContainer">
    <div class="btnBox mb20">
      <Button type="primary" @click="handleAdd" icon="md-add" class="mr10">添加</Button>
    </div>
    <div class="listBox fww">
      <div class="listItem" v-for="(item,index) in videoList" :key="index">
        <div class="videoBox">
          <video :src="item.url" width="300px" height="200px" :controls="controls"></video>
          <div class="buildImg cp" @click="editVideo(item)">
            <Icon type="md-build" size="32" />
          </div>
          <div class="trashImg cp" @click="removeVideo(item)">
            <Icon type="md-trash" size="32" />
          </div>
        </div>
        <p>{{item.name}}</p>
        <div class="frow fjcsb">
          <p>视频类型: {{item.type}}</p>
          <p>上传时间: {{item.time}}</p>
        </div>
      </div>
    </div>
    <video-form :formData="formData" @handleCancel="handleCancel"></video-form>
  </div>
</template>

<script>
import VideoForm from '_c/train/resource/videoForm'
export default {
  name: 'videoContainer',
  components: {
    VideoForm
  },
  data () {
    return {
      controls: true,
      videoList: [],
      formData: {
        showForm: false,
        type: 0,
        title: '',
        info: {}
      }
    }
  },
  created () {
    this.videoList = [
      {
        name: '入司培训',
        time: '2019-09-04',
        type: '入职',
        url: 'https://www.w3school.com.cn/i/movie.ogg',
        id: '1'
      },
      {
        name: '入司培训',
        time: '2019-09-04',
        url: 'https://www.w3school.com.cn/i/movie.ogg',
        id: '1'
      },
      {
        name: '入司培训',
        time: '2019-09-04',
        url: 'https://www.w3school.com.cn/i/movie.ogg',
        id: '1'
      },
      {
        name: '入司培训',
        time: '2019-09-04',
        url: 'https://www.w3school.com.cn/i/movie.ogg',
        id: '1'
      }
    ]
  },
  methods: {
    handleAdd () {
      this.formData = {
        showForm: true,
        type: 0,
        title: '添加',
        info: {}
      }
    },
    editVideo (item) {
      this.formData = {
        showForm: true,
        type: 1,
        title: '编辑',
        info: item
      }
    },
    removeVideo (item) {},
    // 关闭
    handleCancel () {
      this.formData.showForm = false
    }
  }
}
</script>

<style lang="less" scoped>
.videoContainer {
  .listBox {
    width: 100%;
    .listItem {
      width: 300px;
      margin-right: 30px;
      height: 300px;
      .videoBox {
        position: relative;
        &:hover {
          .buildImg {
            position: absolute;
            top: 20px;
            right: 60px;
            display: block;
          }
          .trashImg {
            position: absolute;
            top: 20px;
            right: 20px;
            display: block;
          }
        }
        .buildImg {
          display: none;
        }
        .trashImg {
          display: none;
        }
      }
    }
  }
}
</style>
